<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/MasterPage.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Animoso.Domain.Section>>" %>
<%@ Import Namespace="Animoso.Domain" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Secties
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Secties</h2>
    
     <p>
        <a href="#" id="newSectionButton">Nieuwe sectie</a>
        <div id="newSection" style="visibility: hidden;">
            Titel: <input type="text" id="title"  /> 
            Locatie: <select id="position"><option value="Top">Top</option><option value="Left">Linkerbalk</option></select>
            <input type="button" value="OK" id="okButton" />
        </div>
    </p>
    
    <table id="sectionsTop">
        <tr>
            <th>
                Top
            </th>            
        </tr>

    <% foreach (var section in Model.Where(x => x.Position == Position.Top)) { %>
    
        <tr id="sectionRow_<%=section.Id %>">           
            <td>
            <div>
                <a style="float: right;" id="section_<%=section.Id %>" class="deleteSection" href="#"><img src="Content/Images/File-Delete-icon-large.png" /></a>
                <a style="float: right;" href="Section/EditSection/<%=section.Id %>"><img src="Content/Images/Edit-Document-icon-large.png" /></a>
                <h3><%= Html.Encode(section.Title) %></h3>                             
            </div>            
                
                <table style="border-style: hidden;" id="content_<%=section.Id %>">                
                
                <% foreach (var page in section.Pages)
                {
                       %>
                       <tr id="pageRow_<%=page.Id %>"><td><%=page.Title%></td><td><a href="Section/EditPage/<%=page.Id %>"><img src="Content/Images/Text-Edit-icon.png" /></a></td><td><a id="delete_<%=page.Id %>" class="deletePage" href="#"><img src="Content/Images/File-Delete-icon.png" /></a></td></tr>
                       <%
  
                }
            %>
            </table>
            <br />                        
            <a href="Section/AddPage/<%=section.Id %>" id="newContent_<%=section.Id %>" class="newContent">Nieuwe pagina</a>            
            </td>                               
        </tr>
    
    <% } %>
    </table> 
    <br /><br />
    <table id="sectionsLeft">
        <tr>
            <th>
                Linkerbalk
            </th>            
        </tr>

    <% foreach (var section in Model.Where(x => x.Position == Position.Left))
       { %>
    
        <tr id="sectionRow_<%=section.Id %>">           
            <td>
            <div>
                <a style="float: right;" id="section_<%=section.Id %>" class="deleteSection" href="#"><img src="Content/Images/File-Delete-icon-large.png" /></a>
                <a style="float: right;" href="Section/EditSection/<%=section.Id %>"><img src="Content/Images/Edit-Document-icon-large.png" /></a>
                <h3><%= Html.Encode(section.Title) %></h3>                             
            </div>            
                
                <table style="border-style: hidden;" id="content_<%=section.Id %>">                
                
                <% foreach (var page in section.Pages)
                {
                       %>
                       <tr id="pageRow_<%=page.Id %>"><td><%=page.Title%></td><td><a href="Section/EditPage/<%=page.Id %>"><img src="Content/Images/Text-Edit-icon.png" /></a></td><td><a id="delete_<%=page.Id %>" class="deletePage" href="#"><img src="Content/Images/File-Delete-icon.png" /></a></td></tr>
                       <%
  
                }
            %>
            </table>
            <br />                        
            <a href="Section/AddPage/<%=section.Id %>" id="newContent_<%=section.Id %>" class="newContent">Nieuwe pagina</a>            
            </td>                               
        </tr>
    
    <% } %>
    </table>    
<script type="text/javascript">
    /*$(".newContentButton").click(function() {
        var sectionId = this.id.split('_')[1];
        var title = $("#contentTitle_" + sectionId).val();
        
        $.ajax({ url: "Section/AddContent", data: "title=" + title + "&sectionId=" + sectionId, context: document.body,
            success: function(val) {
                $('#content_' + val.SectionId).append('<tr><td>' + val.Content.Title + '</td></tr>');
                $("#newContentDiv_" + val.SectionId).css("visibility", "hidden");
            }
        });  
    });*/
    $(".newContent").click(function() {
        var sectionId = this.id.split('_')[1];
        $("#newContentDiv_" + sectionId).css("visibility", "visible");
    });
    $("#newSectionButton").click(function() {
        $("#newSection").css("visibility", "visible");
    });

    $("#okButton").click(function() {
        var title = $("#title").val();
        var position = $("#position").val();
        $.ajax({ url: "Section/Add", data: "title=" + title + "&position=" + position, context: document.body,
            success: function(val) {
                if (val.Postion = 1) {
                    $('#sectionsTop tr:last').after('<tr id="sectionRow_' + val.Id + '"><td><div id=' + val.Title + '><div><a style="float: right;" id="section_' + val.Id + '" class="deleteSection" href="#"><img src="Content/Images/File-Delete-icon-large.png" /></a><a style="float: right;" href="#"><img src="Content/Images/Edit-Document-icon-large.png" /></a><h3>' + val.Title + '</h3></div></td></tr>');
                }
                if (val.Position = 0) {
                    $('#sectionsLeft tr:last').after('<tr id="sectionRow_' + val.Id + '"><td><div id=' + val.Title + '><div><a style="float: right;" id="section_' + val.Id + '" class="deleteSection" href="#"><img src="Content/Images/File-Delete-icon-large.png" /></a><a style="float: right;" href="#"><img src="Content/Images/Edit-Document-icon-large.png" /></a><h3>' + val.Title + '</h3></div></td></tr>');
                }

                $('#' + val.Title).append('<br/><br/><a href="Section/AddPage/' + val.Id + '" id="newContent_' + val.Title + '" class="newContent">Nieuwe pagina</a>');



                $("#newSection").css("visibility", "hidden");
                $('.deleteSection').click(function(event) {
                    var sectionId = this.id.split('_')[1];
                    $.ajax({ url: "Section/DeleteSection", data: "sectionId=" + sectionId, context: document.body,
                        success: function(val) {
                            $('#sectionRow_' + sectionId).remove();
                        }
                    });
                });

                $('.deleteSection').confirm();
            }
        });
    });

    $('.deletePage').click(function(event) {
    var pageId = this.id.split('_')[1];
    $.ajax({ url: "Section/DeletePage", data: "pageId=" + pageId, context: document.body,
        success: function(val) {
        $('#pageRow_' + pageId).remove();
        }
    });
});

$('.deleteSection').click(function(event) {
    var sectionId = this.id.split('_')[1];
    $.ajax({ url: "Section/DeleteSection", data: "sectionId=" + sectionId, context: document.body,
        success: function(val) {
            $('#sectionRow_' + sectionId).remove();            
        }
    });
});

    $('.deletePage').confirm();
    $('.deleteSection').confirm();

</script>
</asp:Content>
